<template>
  <div>
    <Echart
      :options="options"
      height="240px"
      width="470px"
    />
  </div>
</template>

<script>
import Echart from '../../../common/echart'

export default {
  components: {
    Echart
  },
  // 这里是预留给你传数据的
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      options: {}
    }
  },
  watch: {
    cdata: {
      handler() {
        const _this = this
        this.options = {
          tooltip: {
            trigger: 'item'
          },
          xAxis: {
            data: ['天商包装', '德中', '爱勒易'],
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#ffffff'
              },
              margin: 20 // 刻度标签与轴线之间的距离。
            }
          },
          yAxis: {
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(2, 99, 255, 0.2)',
                type: 'solid'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(116, 149, 203, 1)'
              }
            }
          },
          series: [
            {
              // 三个最低下的圆片
              name: '',
              type: 'pictorialBar',
              symbolSize: [25, 12],
              symbolOffset: [0, 4],
              z: 12,
              data: [
                {
                  name: '',
                  value: '1',
                  itemStyle: {
                    normal: {
                      color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: '#096acc'
                        },
                        {
                          offset: 1,
                          color: '#096acc'
                        }
                      ])
                    }
                  }
                },
                {
                  name: '',
                  value: '2',
                  itemStyle: {
                    normal: {
                      color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: '#096acc'
                        },
                        {
                          offset: 1,
                          color: '#096acc'
                        }
                      ])
                    }
                  }
                },
                {
                  name: '',
                  value: '3',
                  itemStyle: {
                    normal: {
                      color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: '#096acc'
                        },
                        {
                          offset: 1,
                          color: '#096acc'
                        }
                      ])
                    }
                  }
                }
              ]
            },

            // 柱状图
            {
              name: '2020',
              type: 'bar',
              barWidth: 25,
              barGap: '-100%',
              data: [
                {
                  name: '',
                  value: '1',
                  itemStyle: {
                    normal: {
                      color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: 'linear',
                        global: false,
                        colorStops: [
                          {
                            // 第一节
                            offset: 0,
                            color: 'rgba(2, 99, 255, 0.5)'
                          },
                          {
                            offset: 1,
                            color: 'rgba(2, 99, 255, 1)'
                          }
                        ]
                      }
                    }
                  }
                },
                {
                  name: '',
                  value: '2',
                  itemStyle: {
                    normal: {
                      color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: 'linear',
                        global: false,
                        colorStops: [
                          {
                            // 第二个柱状图下面
                            offset: 0,
                            color: 'rgba(2, 99, 255, 0.5)'
                          },
                          {
                            offset: 1,
                            color: 'rgba(2, 99, 255, 1)'
                          }
                        ]
                      }
                    }
                  }
                },
                {
                  name: '',
                  value: '3',
                  itemStyle: {
                    normal: {
                      color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: 'linear',
                        global: false,
                        colorStops: [
                          {
                            // 第三个柱状图下半截
                            offset: 0,
                            color: 'rgba(2, 99, 255, 0.5)'
                          },
                          {
                            offset: 1,
                            color: 'rgba(2, 99, 255, 1)'
                          }
                        ]
                      }
                    }
                  }
                }
              ]
            },

            {
              name: '',
              type: 'pictorialBar',
              symbolSize: [25, 12],
              symbolOffset: [0, -5],
              z: 12,
              data: [
                {
                  name: '',
                  value: '1',
                  symbolPosition: 'end',
                  itemStyle: {
                    normal: {
                      color: new _this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: '#096acc'
                          },
                          {
                            offset: 1,
                            color: '#096acc'
                          }
                        ],
                        false
                      )
                    }
                  }
                },
                {
                  name: '',
                  value: '2',
                  symbolPosition: 'end',
                  itemStyle: {
                    normal: {
                      color: new _this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: '#096acc'
                          },
                          {
                            offset: 1,
                            color: '#096acc'
                          }
                        ],
                        false
                      )
                    }
                  }
                },
                {
                  name: '',
                  value: '3',
                  symbolPosition: 'end',
                  itemStyle: {
                    normal: {
                      color: new _this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: '#096acc'
                          },
                          {
                            offset: 1,
                            color: '#096acc'
                          }
                        ],
                        false
                      )
                    }
                  }
                }
              ]
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
